<template>
  <div id="app" v-if="isShowApp">
    <navigation>
      <router-view :key="$route.path"></router-view>
    </navigation>
    <!--    <div class="tel_tep" @click="onShowTel" v-if="isSanXia">-->
    <!--      <img :src="customeServiceSVG">-->
    <!--    </div>-->
  </div>
</template>

<script>
  import '@/style/ch.less'
  import Account from '@/dll/account'
  import Address from '@/dll/address'
  import Util from '@/utils/util'
  import customeServiceSVG from '@/assets/img/customeService.png'
  import { mapActions, mapMutations } from 'vuex'

  export default {
    name: 'app',
    data () {
      return {
        customeServiceSVG,
        is_custome: false,
        url: sessionStorage.getItem('shareUrl'),
        isShowApp: false
      }
    },
    watch: {
      $route (to, from) {
        this.onShowLeftArrow()
      }
    },
    created () {
      this.init()
      if (/mall\/info/g.test(decodeURIComponent(this.url))) {
        window.location.href = window.location.origin + decodeURIComponent(this.url)
      }
      this.GET_DEFAULT_ADDRESS(() => {
      })
    },
    mounted () {
      let flag = this.globalData.userInfo && this.globalData.userInfo.flag
      if (flag) {
        this.setFlag({ flag: true, callback: this.onShowLeftArrow })
      }
    },
    methods: {
      ...mapActions(['GET_DEFAULT_ADDRESS']),
      ...mapMutations(['setFlag']),

      init () {
        let query = this.$route.query
        if (query.ticket) {
          this.ticket = query.ticket
          this.ticketLogin()
        } else {
          this.isShowApp = true
        }
        if (Util.isUleeCommunityAPP()) {
          Util.setupWebViewJavascriptBridge(() => {
          })
        }
      },
      onShowTel () {
        this.$vux.alert.show({
          title: '京东客服电话',
          content: '4006069068'
        })
      },

      async ticketLogin () {
        this.$vux.loading.show({
          text: '登录中'
        })
        let res = await Account.ticketLogin(this.ticket)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.globalData.access_token = res.data.access_token
          this.globalData.userInfo = res.data.extra
          this.globalData.userInfo.avatarUrl =
            this.globalData.userInfo.avatarUrl || require('@/assets/img/dfimg.jpg')
          localStorage.setItem('accesstoken', res.data.access_token)
          localStorage.setItem('userInfo', JSON.stringify(res.data.extra))
          if (res.data.extra && parseFloat(res.data.extra.flag)) {
            this.setFlag({ flag: true, callback: this.onShowLeftArrow })
          } else {
            this.setFlag({
              flag: false,
              callback: () => {
              }
            })
          }
          if (res.data.extra.is_weixin == 1) {
            if (
              !res.data.extra.wxgzh_openid ||
              res.data.extra.wxgzh_id != res.data.extra.appid
            ) {
              location.href = res.data.extra.return_url
              return
            }
          }
          // this.$router.replace({
          //   name: 'mall',
          //   params: { from: this.$route.params.from }
          // })
        }
        if (res.code == -1) {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
        this.isShowApp = true
      },

      // 如果是重庆电信就隐藏tab左上角的返回按钮
      onShowLeftArrow () {
        this.$nextTick(function () {
          if (this.isCQDX || this.isCQDXFK) {
            let leftArrow = document.querySelector('.left-arrow')
            if (leftArrow) {
              document.querySelector('.left-arrow').style.display = 'none'
            }
            this.setDefaultAddress()
          }
        })
      },

      // 设置默认地址
      async setDefaultAddress () {
        let address = await Address.getDefaultAddress()
        if (address.code == 0) {
          let areaInfo = (address.data.area_info).split(' ')
          let alias = (address.data.alias).split('_')
          let jddzqy = areaInfo.map((item, index) => {
            if (item) {
              return { id: alias[index], area: item }
            }
          })
          localStorage.jddzqy = JSON.stringify(jddzqy)
        }
      }
    }
  }
</script>

<style lang="less">
  #app {
    /*font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;*/
    font-family: "Microsoft Yahei";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    min-height: 100%;
    box-sizing: border-box;
    position: relative;
    letter-spacing: 0.01rem;
  }

  #app > div {
    box-sizing: border-box;
  }

  .tabbar {
    position: fixed;
    bottom: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #f5f5f5;
    background-color: #ffffff;
    z-index: 10;

    .tabbar-item {
      padding: 5px;
      box-sizing: border-box;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        display: block;
        height: 27px;
        width: 27px;
        background-position: center;
        background-size: contain;
      }

      .label {
        font-size: 10px;
        text-align: center;
        display: block;
      }
    }

    .tabbar-item.active {
      .label {
        font-size: 10px;
        text-align: center;
        display: block;
      }
    }
  }

  .tabbar ~ .page {
    padding-bottom: 55px !important;
  }

  .tel_tep {
    position: fixed;
    display: flex;
    top: 9%;
    right: 0;
    transform: translateY(-50%);
    flex-direction: column;
    text-align: right;
    z-index: 10000;

    img {
      width: 30px;
      height: 30px;
    }
  }
</style>
